<template>
	<view>
		<view class="hc-title-ftop"></view>
		<view class="hc-f">
			<view class="hc-title">品质优选</view>
			<view class="hc-item-content">
				<view class="hc-item" v-for="item of list" :key="item.id" @tap="jumpToNewsDetails(item.id)">
					<img :src="item.imgUrl" alt="" class="hc-item-img" mode="widthFix">
					<view class="hc-item-title">{{item.title}}</view>
					<view class="hc-item-price">{{item.price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'HomeContent',
		props: {
			list: Array
		},
		data() {
			return {
				
			}
		},
		methods: {
			jumpToNewsDetails(newsId) {
				uni.navigateTo({
					 url: '../news/News?id='+newsId
				})
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.hc-title-ftop
		width:100%
		height:20rpx
		background:#f6f6f6
	.hc-f
		width:100%
		margin:0 auto
		.hc-title
			width:100%
			height:100rpx
			line-height:100rpx
			text-indent:30rpx
		.hc-item-content
			display:flex
			flex-wrap:wrap
			margin:0 20rpx
			.hc-item
				width:335rpx
				margin:0 10rpx
				margin-top:28rpx
				.hc-item-img 
					display:block
					width:100%
				.hc-item-title
					font-size:28rpx
					margin-top:10rpx
					height:80rpx;
				.hc-item-price
					color:#ff632a
					font-size:30rpx
					margin-top:6rpx
</style>
